<template>
  <div class="box">
    <div class="content">
      <img class="login-img images" src="../../assets/images/login.jpg" alt="登录">
      <img class="register-img images" src="../../assets/images/register.jpg" alt="注册">
      <div class="login-wrapper">
        <div class="top-tips">
          <span>汽车销量数据分析系统</span>
          <span class="top-tips-span">
            <el-link type="primary" @click="clickRegisterOrLogin">注册</el-link>
          </span>
        </div>
        <h1 class="h1-text">
          登录
        </h1>
        <div class="login-form">
          <div class="user-form form-item">
            <div class="text-tips">
              <span>用户名</span>
            </div>
            <input v-model="form.username" placeholder="请输入用户名" type="text">
          </div>
          <div class="password-form form-item">
            <div class="text-tips">
              <span>密码</span>
            </div>
            <input v-model="form.password" placeholder="请输入密码" type="password">
          </div>
          <button @click="submitFormData" class="btn">登录</button>
        </div>
        <div class="register-form">
          <div class="user-form form-item">
            <div class="text-tips">
              <span>用户名</span>
            </div>
            <input v-model="form.username" placeholder="请输入用户名" type="text">
          </div>
          <div class="password-form form-item">
            <div class="text-tips">
              <span>密码</span>
            </div>
            <input v-model="form.password" placeholder="请输入密码" type="password">
          </div>
          <div class="password-form form-item">
            <div class="text-tips">
              <span>确认密码</span>
            </div>
            <input v-model="confirmPassword" placeholder="确认密码" type="password">
          </div>
          <button @click="registryUser" class="btn">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


import userApi from "@/api/userApi";

export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      confirmPassword: "",
      flag: true,
      rules: {
        username: [{required: true, message: "请输入用户名或邮箱", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
      },
    };
  },
  methods: {
    // 提交登录表单的数据
    submitFormData() {
      if (this.form.username !== '' && this.form.password !== '') {
        userApi.user_login(this.form).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message)
            // 表示登录成功
            localStorage.setItem("userInfo", JSON.stringify({
              "username": res.data.loginId,
              "tokenValue": res.data.tokenValue,
              expire: Date.now() + res.data.tokenTimeout
            }))
            // 2.路由到主页面
            this.$router.push("/home")
          } else {
            // 表示登录失败
            this.$message.error(res.message)
          }
        });

      } else {
        this.$message.error("请完整填写信息")
        return false;
      }
    },
    clickRegisterOrLogin() {
      this.form = {
        username: "",
        password: "",
      }
      document.querySelector('.top-tips-span').addEventListener('click', function () {
        if (this.flag) {
          document.querySelector('.content').classList.add("add-class-content");
          document.querySelector('.login-img').classList.add("add-class-login-img");
          document.querySelector('.register-img').classList.add("add-class-register-img");
          document.querySelector('.login-img').classList.remove("add-class-login-img-show");
          document.querySelector('.login-wrapper').style.height = '80vh';
          document.querySelector('.content').style.height = '90vh';
          document.querySelector('.login-form').style.display = 'none';
          document.querySelector('.register-form').style.display = 'block';
          document.querySelector('.top-tips-span').innerHTML = '登录';
          document.querySelector('.h1-text').innerHTML = '注册';
          this.flag = false;
        } else {
          document.querySelector('.content').classList.remove("add-class-content");
          document.querySelector('.login-img').classList.remove("add-class-login-img");
          document.querySelector('.login-img').classList.add("add-class-login-img-show");
          document.querySelector('.register-img').classList.remove("add-class-register-img");
          document.querySelector('.login-wrapper').style.height = '70vh';
          document.querySelector('.content').style.height = '85vh';
          document.querySelector('.login-form').style.display = 'block';
          document.querySelector('.register-form').style.display = 'none';
          document.querySelector('.top-tips-span').innerHTML = '注册';
          document.querySelector('.h1-text').innerHTML = '登录';
          this.flag = true;
        }
      })
    },
    // 判断邮箱是否正确
    isValidMobile(mobile) {
      const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return reg.test(mobile);
    },
    checkPassword(password) {
      const reg = /^(?=.*[A-Za-z])(?=.*\d).+$/;
      return reg.test(password);
    },
    registryUser() {
      if (this.form.username !== '' && this.form.password !== '' && this.confirmPassword !== "") {
        if (this.form.password === this.confirmPassword) {
          if (this.checkPassword(this.form.password)) {
            userApi.user_register(this.form).then(resp => {
              if (resp.code === 200) {
                this.$message.success(resp.message)
                setTimeout(() => {
                  localStorage.removeItem("userInfo")
                  window.location.reload();
                }, 1000)
              } else {
                this.$message.error(resp.message)
              }
            })
          } else {
            this.$message.error("密码必须包含字母和数字！")
          }
        } else {
          this.$message.error("两次密码输入不相同")
        }
      } else {
        this.$message.error("请完整填写信息")
      }
    }
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  background-color: rgb(111, 138, 197);
  width: 100vw;
  height: 100vh;
}

.box .content {
  width: 90vw;
  height: 85vh;
  background-color: rgb(228, 218, 232);
  border-radius: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 1s;
}

.box .content .images {
  margin-left: -150px;
  margin-right: 100px;
  position: absolute;
  left: 15%;
}

.box .content .login-img {
  width: 45%;
  height: 90%;
  border-radius: 15%;
}

.box .content .register-img {
  width: 45%;
  opacity: 0;
  border-radius: 15%;
}

.box .content .login-wrapper {
  width: 30vw;
  height: 70vh;
  border-radius: 40px;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background: rgba(244, 240, 245, 0.6);
  padding: 60px;
  box-sizing: border-box;
  position: absolute;
  right: 10%;
  transition: 1s;
}

.box .content .login-wrapper .top-tips span:nth-child(1) {
  font-size: 25px;
  font-weight: 600;
}

.box .content .login-wrapper .top-tips .top-tips-span {
  font-size: 15px;
  color: rgb(79, 133, 226);
  border-bottom: 1px solid rgb(79, 133, 226);
  float: right;
  line-height: 25px;
  cursor: pointer;
}

.box .content .login-wrapper h1 {
  font-size: 45px;
  margin: 20px 0;
}

.box .content .login-wrapper .other-login {
  width: 60%;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  margin: 40px 0;
  background-color: rgb(79, 133, 226);
  padding-bottom: 2px;
  cursor: pointer;
}

.box .content .login-wrapper .other-login img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.box .content .login-wrapper .other-login span {
  vertical-align: middle;
}

.box .content .login-wrapper .login-form,
.box .content .login-wrapper .register-form {
  width: 100%;
}

.box .content .login-wrapper .login-form .form-item .text-tips,
.box .content .login-wrapper .register-form .form-item .text-tips {
  color: rgb(123, 122, 123);
  margin: 5px;
}

.box .content .login-wrapper .login-form .form-item .text-tips .forgot-password,
.box .content .login-wrapper .register-form .form-item .text-tips .forgot-password {
  font-size: 15px;
  color: rgb(79, 133, 226);
  border-bottom: 1px solid rgb(79, 133, 226);
  float: right;
  line-height: 25px;
  cursor: pointer;
}

.box .content .login-wrapper .login-form .form-item input,
.box .content .login-wrapper .register-form .form-item input {
  width: 100%;
  height: 50px;
  margin: 5px 0;
  border-radius: 5px;
  border: 0;
  font-size: 17px;
  padding: 0 20px;
  box-sizing: border-box;
}

.box .content .login-wrapper .login-form .form-item input:focus,
.box .content .login-wrapper .register-form .form-item input:focus {
  outline: none;
  border: 1px solid rgb(79, 133, 226);
}

.box .content .login-wrapper .login-form .btn,
.box .content .login-wrapper .register-form .btn {
  width: 150px;
  height: 50px;
  margin: 20px 0;
  background-color: rgb(30, 144, 255);
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.box .content .login-wrapper .login-form {
  display: block;
}

.box .content .login-wrapper .register-form {
  display: none;
}

.add-class-content {
  background-color: rgb(156, 148, 208) !important;
  transition: 0.1s;
}

.add-class-login-img {
  -webkit-animation: disappear 0.3s forwards;
  animation: disappear 0.3s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.add-class-login-img-show {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.add-class-register-img {
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes appear {
  from {
    border-radius: 15%;
    opacity: 0;
  }

  to {
    border-radius: 0;
    opacity: 1;
  }
}

@keyframes appear {
  from {
    border-radius: 15%;
    opacity: 0;
  }

  to {
    border-radius: 0;
    opacity: 1;
  }
}

@-webkit-keyframes disappear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes disappear {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/*# sourceMappingURL=style.css.map */
</style>
